<!--用户编辑页面-->
<template>
    <el-container>
        <el-header height="25px">
            <div class="skew-div">用户管理数据</div>
        </el-header>
        <el-divider></el-divider>
        <el-main>
            <el-row :gutter="20">
                <el-col :span="4">
                    <div class="grid-content " align="left">
                        用户名：
                        <el-input v-model="input" placeholder="用户名" size="mini" style="width: 50%;">
                        </el-input>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content ">
                        角色名称：
                        <el-input v-model="input" placeholder="角色名称" size="mini" style="width: 60%;">
                        </el-input>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content ">
                        用户描述：
                        <el-input v-model="input" placeholder="用户描述" size="mini" style="width: 60%;">
                        </el-input>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content ">
                        用户状态
                        <el-input v-model="input" placeholder="用户状态" size="mini" style="width: 60%;">
                        </el-input>
                    </div>
                </el-col>
                <el-button type="primary" size="small">查询</el-button>
                <el-button size="small" @click="resetsuccess">重置</el-button>
                <el-button type="primary" style="float: right" size="large" @click="dialogFormVisible = true">新建</el-button>
                <!--新建用户信息-->
                <el-dialog title="请填写用户信息" :visible.sync="dialogFormVisible">
                    <el-form :model="userData">
                        <el-form-item label="用户名" :label-width="formLabelWidth">
                            <el-input v-model="userData.userName" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="角色名称" :label-width="formLabelWidth">
                            <el-input v-model="userData.roleName" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="联系人" :label-width="formLabelWidth">
                            <el-input v-model="userData.userRealName" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="用户描述" :label-width="formLabelWidth">
                            <el-input v-model="userData.description" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="dialogFormVisible = false">提 交</el-button>
                    </div>
                </el-dialog>
            </el-row>
            <el-table :data="userData" stripe style="width: 100%">
                <el-table-column prop="userName" label="用户姓名" width="180">
                </el-table-column>
                <el-table-column prop="roleName" label="角色名称" width="180">
                </el-table-column>
                <el-table-column prop="userRealName" label="联系人">
                </el-table-column>
                <el-table-column prop="description" label="用户描述">
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间">
                </el-table-column>
                <el-table-column prop="recentLoginTime" label="最近登录时间">
                </el-table-column>
                <!--用户状态栏-->
                <el-table-column label="用户状态">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.status" active-text="正常" inactive-text="停用"></el-switch></template>
                </el-table-column>
                <!--右侧操作栏-->
                <el-table-column label="操作">
                    <template>
                        <el-button type="primary" size="mini" @click="editsuccess">编辑</el-button>
                        <el-button size="mini" type="danger" @click="deletesuccess">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
    </el-container>
</template>

<script>
export default {
    data: function () {
        return {
            userData: [{
                userName: 'kuaisusuoyin',
                roleName: '快速索引',
                userRealName: '田心',
                description: '快速索引',
                createTime: '2023-08-16 22:26:32',
                recentLoginTime: '2023-08-16 22:26:32'
            }, {
                userName: 'shujucunchu',
                roleName: '数据存储',
                userRealName: '李一亮',
                description: '数据存储',
                createTime: '2023-08-16 22:26:32',
                recentLoginTime: '2023-08-16 22:26:32'
            }],
            dialogFormVisible: false,//编辑对话框
            formLabelWidth: '120px',//对话框宽度
            value: true //用户状态
        }
    },
    methods: {
        deletesuccess() {
            this.$message({
                showClose: true,
                message: '删除成功',
                type: 'success'
            });
        },
        resetsuccess() {
            this.$message({
                showClose: true,
                message: '信息已重置',
                type: 'success'
            });
        },
        editsuccess() {
            this.$message({
                showClose: true,
                message: '编辑成功',
                type: 'success'
            });
        }
    }
}
</script>

<style>
.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.skew-div {
    transform: skew(-10deg);
    text-align: left;
    font-size: 25px;
}
</style>
